import React, { useState, useContext } from 'react';
const AppContext = React.createContext({}); // 定义一个上下文对象
const App = () => {
  // useState 状态钩子
  // useContext 共享状态钩子
  const [count, setCount] = useState(() => {
    return 100
  })
  // const [状态名称, 修改状态的方法] = useState(默认值(可以是函数))
  return (
    <div>
      {count}
      <button onClick={() => {
        // setCount(count + 1)
        setCount((prev) => {
          // prev上一次的结果
          return prev + 1
        })
      }}>
        Click
      </button>
      <AppContext.Provider value={{
        username: count
      }}>
        <NavMessage></NavMessage>
        <ContentBox></ContentBox>
      </AppContext.Provider>

    </div>
  );
}
function NavMessage() {
  const { username } = useContext(AppContext);
  return <div>
    NavMessage ： {username}
  </div>
}
function ContentBox() {
  const { username } = useContext(AppContext);
  return <div>
    ContentBox ： {username}
  </div>
}


export default App;
